const {
  resolve, join
} = require('path')
const vueloader = require('vue-loader/lib/plugin')
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin") //用于把HTML页面放入内存
const minicss = require("mini-css-extract-plugin") //webpack4.0以后的打包css文件
const CopyWebpackPlugin = require("copy-webpack-plugin")
const htmlplugin = new HtmlWebpackPlugin({
  template: join(__dirname, './src/index.html'), //源头文件
  filename: "index.html", //生成首页的文件名称
  environment: {
      arrowFunction: false
  } // 打包不使用箭头函数
})
const css = new minicss({ //输出css独立文件
  filename: "./css/[name].css",
  chunkFilename: "[name].css" //或者id
})
module.exports.bases = {
  entry: ['webpack-hot-middleware/client', './src/index.js'],
  output: {
    filename: 'main.js', //通过热加载输出script文件挂载在目录与index.HTML一样
    path: resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js', '.vue', '.json']
  },
  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        exclude: /node_modules/
      },
      {
        test: /\.css$/, // 匹配特定文件的正则表达式或正则表达式数组
        use: [ // 应用于模块的 loader 使用列表
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.less$/, // 匹配特定文件的正则表达式或正则表达式数组
        use: [ // 应用于模块的 loader 使用列表
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg|jpg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: 'static/img/[name].[ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: 'static/media/[name].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: 'static/fonts/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    htmlplugin,
    css,
    new vueloader(),
    new webpack.HotModuleReplacementPlugin(),
    new CopyWebpackPlugin([
      {
        from: resolve(__dirname, './static'),
        to: './static',
        ignore: ['.*']
      }
    ])
  ],
}